<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <el-input v-model="formData.title" placeholder="请输入关键词" class="w-300px mr-12px"></el-input>
            <div class="w-190px mr-12px">
                <el-select v-model="formData.status" placeholder="请选择关键词状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
        </div>
        <div class="pt-26px pl-26px pr-26px table-container">
            <el-table :data="tableData" :default-sort="{ prop: 'searchTotal', order: 'descending' }" class="w-full">
                <el-table-column prop="sort" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="关键词" align="center" />
                <el-table-column prop="status" label="状态" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 1" type="success">已审核</el-tag>
                        <el-tag v-else type="danger">未审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="searchTotal" label="搜索量" sortable align="center" width="130" />
                <el-table-column prop="money" label="金额" sortable align="center" width="120" />
                <el-table-column prop="time" label="添加时间" align="center" width="180" />
                <el-table-column prop="video" label="关联视频" align="center" width="180" />
                <el-table-column label="操作" align="center" width="150">
                    <template #default="scope">
                        <el-button type="primary" size="small">查看实时排名</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-26px pl-26px pr-26px pb-26px page-container flex flex-center">
            <el-pagination
                size="small"
                background
                layout="prev, pager, next"
                :total="50"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'

const formData = reactive({
    title: '',
    status: ''
})

const tableData = [
    {
        sort: '1',
        name: '熟料粉碎机',
        status: 1,
        searchTotal:2865,
        money:40,
        time:'2025-05-16 15:29:14',
        video:''

    },
    {
        sort: '1',
        name: '熟料粉碎机',
        status: 0,
        searchTotal:2865,
        money:40,
        time:'2025-05-16 15:29:14',
        video:''

    },
]

function handleSearch() {
    console.log('search')
}
</script>

<style scoped></style>